<!--
    Created by IntelliJ IDEA.
    User: Dai
    Date: 2018/4/07
    Time: 13:14
    Remark: 平台总览页面
    To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>平台总览</title>
    <link rel="stylesheet" href="/css/overview.css"/>
    <style>
        .container-fluid .col-xs-3 {
            padding: 0;
        }

        .container-fluid div span {
            padding: 0;
        }

        .infoBox img {
            max-height: 10px;
        }

        .infoBox .title {
            background-color: rgba(0, 136, 255, 0.8);
            padding: 2px 5px;
            border: 1px solid #5daff7;
            border-radius: 5px 5px 0 0;
        }

        .infoBox .list {
            font-size: 14px;
            padding: 10px;
            background-color: rgba(193, 218, 244, 0.8);
            height: 169px;
            border: 1px solid #5daff7;
            border-radius: 0 0 5px 5px;
        }

        .infoBox .list label {
            width: 100px;
        }

        .div_with_border span.col-sm-10 {
            text-align: right;
            padding-right: 10px;
        }
    </style>
    <!--echarts-->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/dark.js"></script>
    <script>
        /**
         * 图表
         */
        $(function () {
            /**
             * 平台规模 中 的饼状图
             */
            platform_scale();
            /**
             * 地图下面的 转移电量曲线
             */
            transfer_power();
        });

        /**
         * 平台规模 中 的饼状图
         */
        function platform_scale() {
            var platform_scale = echarts.init(document.getElementById('platform_scale'), 'dark');
            platform_scale.setOption({
                backgroundColor: '',    //设置透明的背景
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series: [
                    {
                        name: '平台规模',
                        type: 'pie',
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        data: []
                    },
                ]
            });
            platform_scale.showLoading();
            $.get("/overview/platform_scale", function (callback) {
                platform_scale.hideLoading();
                // 填入数据
                platform_scale.setOption({
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '平台规模',
                        data: callback
                    }]
                });
            })
        }

        /**
         * 地图下面的 转移电量曲线
         */
        function transfer_power() {
            var value = $("#transfer_power_type").val();
            var transfer_power = echarts.init(document.getElementById('transfer_power'), 'dark');
            transfer_power.setOption({
                backgroundColor: '',
                grid: {                 // 设置边距
                    left: '3%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    data: []
                },
                yAxis: {
                    name: '电量  \n(MWh)',
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '转移电量',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: []
                }]
            });
            transfer_power.showLoading();
            $.post("/overview/transfer_power", {type: value}, function (jsonObject) {
                transfer_power.hideLoading();
                console.log(jsonObject);
                console.log(Object.keys(jsonObject));
                transfer_power.setOption({
                    xAxis: {
                        data: Object.keys(jsonObject).sort()
                    },
                    series: [{
                        name: '转移电量',
                        data: Object.keys(jsonObject).sort().map(function (key) {
                            return jsonObject[key];
                        })
                    }]
                });
            });
        }
    </script>
    <!--百度地图-->
    <script src="http://api.map.baidu.com/api?v=3.0&ak=nbnttGGI6lilllgy2znNZGif3H7HxI2W"></script>
    <script src="/js/InfoBox_min.js"></script>
    <script th:inline="javascript">
        var list = [[${list}]];
        $(function () {
            // 创建地图实例
            var map = new BMap.Map("map", {
                minZoom: 4,
                maxZoom: 18,
                enableMapClick: false,
            });
            if (list.length < 1) {
                // 初始化地图，设置中心点坐标和地图级别
                var point = new BMap.Point(121.566497, 31.233299);
                map.centerAndZoom(point, 15);
                // 设置滚轮可以放大缩小
                map.enableScrollWheelZoom(true);
                // 设置地图样式
                map.setMapStyle({style: 'bluish'});
                // points.push(point);
                map.setCurrentCity("上海");
                alert("项目没有坐标，无法显示在地图上");
            } else {
                var points = [];
                list.forEach(function (info, i) {
                    // 初始化地图，设置中心点坐标和地图级别
                    //alert(info.longitude+"     ::::::      "+info.latitude);
                    var point = new BMap.Point(info.longitude, info.latitude);
                    if (i == 0) {
                        map.centerAndZoom(point, 15);
                        map.enableScrollWheelZoom(true);
                        map.setMapStyle({style: 'bluish'});
                    }
                    points.push(point);
                })
                //添加信息化窗口
                addMarker(map, points);
                // 添加控件 - 还原位置
                addControl(map, points);
            }
        });

        /**
         * 添加信息化窗口
         */
        function addMarker(map, points) {
            points.forEach(function (point, i) {
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);               // 将标注添加到地图中
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳起来吧♪(^∇^*) 我的小啾啾~
                var html = ["<div class='infoBoxContent' style='color: #1d1c7d;'>",
                    "<div class='title'><strong>" + list[i].projectName + "</strong>&nbsp;<a href='/monitor/monitor?id="+list[i].id+"'>&gt;&gt;</a></div>",
                    "<div class='list'>",
                    "<div><label>总存储能量</label><span>" + list[i].totalStorageEnergy + "</span><span>&nbsp;&nbsp;Kwh</span></div>",
                    "<div><label>安全运行天数</label><span>" + list[i].safeRunningDays + "</span><span>&nbsp;&nbsp;天</span></div>",
                    "<div><label>总电量</label><span>" + list[i].totalElectricity + "</span><span>&nbsp;&nbsp;Ah</span></div>",
                    "<div><label>故障数</label><span>" + list[i].faults + "</span></div>",
                    "<div><label>联系人</label><span>" + list[i].contacts + "</span></div>",
                    "<div><label>联系方式</label><span>" + list[i].telphone + "</span></div>",
                    "</div>",
                    "</div>"];
                var infoBox = new BMapLib.InfoBox(map, html.join(""), {
                    boxStyle: {
                        width: "269px"
                    },
                    closeIconUrl: "/image/close.png",
                    closeIconMargin: "10px",
                    align: INFOBOX_AT_TOP
                });
                if (i == 0) {
                    infoBox.open(marker);
                }
                // 添加点击事件，只要点击小啾啾就可以显示出信息框
                marker.addEventListener("click", function () {
                    infoBox.open(marker);
                });
            })
        }

        /**
         * 添加控件 - 下拉框
         */
        function addControl(map, points) {
            // 定义一个控件类,即function
            function ZoomControl() {
                // 默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                this.defaultOffset = new BMap.Size(10, 10);
            }

            // 通过JavaScript的prototype属性继承于BMap.Control
            ZoomControl.prototype = new BMap.Control();
            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
            ZoomControl.prototype.initialize = function (map) {
                // 创建一个DOM元素
                var div = document.createElement("div");
                // 添加select
                var select = "<select>\n";
                list.forEach(function (info, i) {
                    select += "<option value='" + i + "'>" + info.projectName + "</option>\n";
                })
                select += "</select>";
                $(div).append(select);
                // 设置样式
                div.style.cursor = "pointer";
                div.style.color = "white";
                div.style.border = "2px solid rgba(0, 31, 252, 0)";
                div.style.borderRadius = "5px";
                div.style.backgroundColor = "rgba(0, 31, 252, 0.45)";
                div.style.padding = "5px";
                // 绑定事件,点击一次就跳转对应的点
                $(div).on("click", function () {
                    var p = $(this).children("select").val();
                    map.centerAndZoom(points[p], 15);
                });
                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);
                // 将DOM元素返回
                return div;
            }
            // 创建控件
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);
        }
    </script>
    <!--转移电量曲线-->
    <script>
        function addButtonClick(value) {
            $("#transfer_power_type").val(value);
            transfer_power();
        }

        $(function () {
            $("#sidebar-toggle-icon").click();
        });
    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner gmain" style="color: white;">
        <div class="headerOverview">储能监控云平台</div>
        <div class="container-fluid content">
            <div class="section">
                <!--左-->
                <div class="divleftbox">
                    <!--平台规模-->
                    <div class="topbox">
                        <h3>平台规模</h3>
                        <div class="div_with_border">
                            <span class="col-sm-8">总用户数</span>
                            <span class="col-sm-3" th:text="${total_users}"></span>
                            个
                        </div>
                        <!--饼状图-->
                        <div id="platform_scale" style="height: 300px;"></div>
                    </div>
                    <!--平台性能-->
                    <div class="bottombox">
                        <h3>平台性能</h3>
                        <!--平均充放电效率-->
                        <div class="div_out_of_diamond">
                            <img src="../image/overview/icon1.png">
                            <div class="div_with_diamond">
                                <span>平均充放电效率</span>
                                <span style="color: yellow; font-size: 14px; float: right">
                                    <span th:text="${average_charge_discharge}"></span>
                                    %
                                </span>
                            </div>
                        </div>
                        <!--系统安全稳定运行-->
                        <div class="div_out_of_diamond">
                            <img src="../image/overview/icon2.png">
                            <div class="div_with_diamond">
                                <span>系统安全稳定运行</span>
                                <span style="color: yellow; font-size: 14px; float: right">
                                    <span th:text="${safe_operation_days}"></span>
                                    天
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--中-->
                <div class="divcenterbox">
                    <!--地图信息-->
                    <div class="topbox">
                        <div style="height: 476px" id="map"></div>
                    </div>
                    <!--转移电量曲线-->
                    <div class="bottombox" style="position: relative">
                        <h3 style="position: absolute;z-index: 500;">转移电量曲线</h3>
                        <div style="position: absolute; z-index: 1000; width: 25%; left: 74%; top: 15%; text-align: center;">
                            <button class="div_with_border" onclick="addButtonClick('week')"
                                    style="display: inline-block; width: 30%; border-width: 1px; float: left;">周
                            </button>
                            <button class="div_with_border" onclick="addButtonClick('month')"
                                    style="display: inline-block; width: 30%; border-width: 1px; float: left;">月
                            </button>
                            <button class="div_with_border" onclick="addButtonClick('year')"
                                    style="display: inline-block; width: 30%; border-width: 1px; float: left;">年
                            </button>
                        </div>
                        <input type="hidden" id="transfer_power_type" value="week">
                        <div style="height: 260px; margin-top: 15px" id="transfer_power"></div>
                    </div>
                </div>
                <!--平台效益-->
                <div class="divrightbox">
                    <div class="topbox">
                        <h3>平台效益</h3>
                        <!--累计节省电量-->
                        <div class="div_with_border div_out_of_right_box">
                            <img src="../image/overview/icon4.png">
                            <div class="div_in_right_box">
                                <p>累计节省电量</p>
                                <p>
                                    <span th:text="${jsonObject.saveElectricity}"></span>
                                    &nbsp;MWh
                                </p>
                            </div>
                        </div>
                        <!--累计再利用退役电池-->
                        <div class="div_with_border div_out_of_right_box">
                            <img src="../image/overview/icon5.png">
                            <div class="div_in_right_box">
                                <p>累计再利用退役电池</p>
                                <p>
                                    <span class="col-sm-10" th:text="${jsonObject.saveBattery}"></span>
                                    &nbsp;T
                                </p>
                            </div>
                        </div>
                        <!--用户平均电费降比率/收益率-->
                        <div class="div_with_border div_out_of_right_box">
                            <img src="../image/overview/icon6.png">
                            <div class="div_in_right_box">
                                <p>用户平均电费降比率/收益率</p>
                                <p>
                                    <span class="col-sm-10"
                                          th:text="${#numbers.formatDecimal({jsonObject.billPercent}, 1, 2)}"></span>
                                    &nbsp;%
                                </p>
                            </div>
                        </div>
                        <!--下面的东西-->
                        <div class="div_with_border div_out_of_right_box"
                             style="padding: 0; background:none; margin-top: 40px">
                            <!--减少C排放-->
                            <div class="div_with_background">
                                <img src="/image/碳排放趋势 .png" style="max-height: 40px;">
                                <span>&nbsp;减少C排放</span>
                                <span>
                                    <span th:text="${jsonObject.saveC}"></span>
                                    <span>t</span>
                                </span>
                            </div>
                            <!--减少CO2排放-->
                            <div class="div_without_background">
                                <img src="/image/减少二氧化碳排放.png" style="max-height: 40px;">
                                <span>&nbsp;减少CO2排放</span>
                                <span>
                                    <span th:text="${jsonObject.saveCO2}"></span>
                                     <span>t</span>
                                </span>
                            </div>
                            <!--等效种植树木-->
                            <div class="div_with_background">
                                <img src="/image/相当于种树.png" style="max-height: 40px;">
                                <span>&nbsp;等效种植树木</span>
                                <span>
                                    <span th:text="${jsonObject.saveTree}"></span>
                                    <span>颗</span>
                                </span>
                            </div>
                            <!--节约标准煤-->
                            <div class="div_without_background">
                                <img src="/image/标准煤.png" style="max-height: 40px;">
                                <span>&nbsp;节约标准煤</span>
                                <span>
                                    <span th:text="${jsonObject.saveMei}"></span>
                                     <span>t</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>